The Four Components of the CSS Transition Property
In CSS, a transition defines how a property changes smoothly from one state to another over a specific period. The transition shorthand property consists of four main components that control how these animations behave.
transition-property— Specifies which CSS property should transition (e.g., transform, opacity, background-color).transition-duration— Defines how long the transition takes to complete (e.g., 0.5s, 2s).transition-timing-function— Controls the acceleration curve of the transition (e.g., ease, linear, ease-in-out).transition-delay— Determines how long to wait before starting the transition (e.g., 0s, 1s).
In this example, the box smoothly scales and rotates when hovered. The transition starts after a 0.2-second delay, lasts 0.5 seconds, and uses the ease-in-out timing function for natural motion.
All four components can be written in one shorthand declaration or separately.
If no
transition-propertyis defined,allis used by default.Transitions work best with animatable properties like
transform,opacity, andcolor.